<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import LazyRender from "@/components/LazyRender/index.vue";
import EditDropDown from "../../components/EditDropDown.vue";
import ColumnsTable from "../components/ColumnsTable.vue";
import SubEditDropDown from "../components/SubEditDropDown.vue";
import TitleDropDown from "../components/TitleDropDown.vue";
import ViewHistory from "../task/components/ViewHistory.vue";
import { queryBylockTime } from "@/api/equip/recording";
import { queryTaskItem } from "@/api/equip/inspectTask";
import dayjs from "dayjs";
const exceptionReport = ref([
  [
    {
      label: "缺失类别",
      value: "missingTypeDesc"
    },
    {
      label: "缺失等级",
      value: "missingLevelDesc"
    }
  ],
  [
    {
      label: "缺失位置",
      value: "inspectAreaDesc"
    },
    {
      label: "详细位置",
      value: "missingDetailPosition"
    }
  ],
  [
    {
      label: "异常说明",
      value: "missingDesc"
    }
  ],
  [
    {
      label: "异常照片",
      value: "missingPictureList"
    }
  ]
]);
const areaLoading = ref(false);
const itemDetail = ref<Record<string, any>>({});
// 获取详情
const getItemDetail = async () => {
  areaLoading.value = true;
  try {
    const {
      query: { inspectArea, ruleCode }
    } = props;
    itemDetail.value = await queryTaskItem({ ruleCode, inspectArea, taskCode: tabValue.value });
  } catch (error) {}
  areaLoading.value = false;
};
// 查看历史结果
const isHistory = ref(false);
const handleHistory = row => {
  isHistory.value = true;
};

const data = ref<any>([]);
const tabValue = ref("");
const props = defineProps(["query", "planCode"]);
const isEmpty = ref(false);
const initData = async () => {
  // 1、获取tab list
  const {
    query: { lockTime },
    planCode
  } = props;
  const date = lockTime ? dayjs(new Date(lockTime)).format("YYYY-MM-DD") : undefined;
  const res = await queryBylockTime({ lockTime: date, planCode });
  data.value = res;
  // 2、是否显示缺省页
  if (data.value.length === 0) {
    return (isEmpty.value = true);
  } else {
    isEmpty.value = false;
  }
  // 3、默认选中tab
  if (lockTime) {
    const targetDate = data.value.find(item => item.taskTimeNum.includes(date));
    tabValue.value = targetDate?.taskCode || data.value[0]?.taskCode;
  } else {
    tabValue.value = data.value[0]?.taskCode;
  }
  // 4、获取选中tab的详情
  getItemDetail();
};
onMounted(() => {
  initData();
});
const page = defineModel("page");
// 返回区域列表页
const backDetailPage = () => {
  page.value = "list";
};
</script>
<template>
  <div>
    <div class="view-flex">
      <div class="mb-[24px]">
        <px-button type="primary" icon="ArrowLeft" @click="backDetailPage">返回</px-button>
      </div>
      <px-tabs class="tab-container" v-if="!isEmpty" v-model="tabValue" tab-position="left" @tab-change="getItemDetail">
        <px-tab-pane v-for="item in data" :name="item.taskCode" :key="item.taskCode" v-loading="areaLoading" :label="item.taskTimeNum" :lazy="true">
          <div>
            <px-empty v-if="!itemDetail?.contentDTOList && !itemDetail?.eqpContentDTOList" :image-size="200" description="暂无数据" />
            <px-scrollbar v-else max-height="calc(100vh - 246px)">
              <EditDropDown v-if="itemDetail?.contentDTOList?.length > 0" dropdownTitle="环境巡检">
                <template v-slot:content>
                  <SubEditDropDown
                    v-for="(inspectItem, inspectIndex) in itemDetail.contentDTOList"
                    :key="`SubEditDropDown${inspectIndex}`"
                    :dropdownTitle="`${inspectItem.inspectItemContent}`"
                    :isDropdown="false"
                  >
                    <template v-slot:content>
                      <LazyRender>
                        <px-table
                          v-if="inspectItem.inspectItemType === 1"
                          :data="inspectItem.contentItemDTOList"
                          style="margin-bottom: 18px"
                          class="equip-table"
                          size="small"
                          max-height="400"
                          border
                        >
                          <px-table-column fixed="left" prop="meterReadingItem" label="抄表项" min-width="160" show-overflow-tooltip />
                          <px-table-column prop="unit" label="单位" min-width="140" show-overflow-tooltip />
                          <px-table-column prop="maxValue" label="最大值" min-width="100" show-overflow-tooltip />
                          <px-table-column prop="minValue" label="最小值" min-width="120" show-overflow-tooltip />
                          <px-table-column prop="eqpName" label="设备" min-width="150" show-overflow-tooltip />
                          <px-table-column prop="autoMeterReadingPoint" label="自动抄表点" min-width="150" show-overflow-tooltip />
                          <px-table-column prop="result" label="抄表值（选填）" min-width="150" show-overflow-tooltip />
                          <px-table-column label="操作" min-width="150" show-overflow-tooltip>
                            <template #default="scope">
                              <px-button link type="primary" disabled @click="handleHistory(scope.row)">历史抄表值</px-button>
                            </template>
                          </px-table-column>
                        </px-table>
                        <px-table
                          v-else
                          :data="inspectItem.contentItemDTOList"
                          style="margin-bottom: 18px"
                          class="equip-table"
                          size="small"
                          max-height="400"
                          border
                        >
                          <px-table-column fixed="left" prop="inspectItem" label="巡检项" min-width="160" show-overflow-tooltip />
                          <px-table-column prop="inspectContent" label="巡检内容" min-width="140" show-overflow-tooltip />
                          <template v-if="data.taskStatus === 2">
                            <px-table-column prop="inspectContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
                              <template #default="scope">
                                <div v-if="scope.row.inspectContentRangeCode === 1">文本</div>
                                <div v-if="scope.row.inspectContentRangeCode === 2">数字</div>
                                <div v-if="scope.row.inspectContentRangeCode === 3">判断：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                                <div v-if="scope.row.inspectContentRangeCode === 4">选择：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                              </template>
                            </px-table-column>
                          </template>
                          <template v-else>
                            <px-table-column prop="result" label="巡检结果" min-width="100" show-overflow-tooltip />
                            <px-table-column prop="executeByName" label="执行人" min-width="120" show-overflow-tooltip />
                            <px-table-column prop="execTime" label="执行时间" min-width="150" show-overflow-tooltip />
                          </template>
                        </px-table>
                      </LazyRender>

                      <div v-if="itemDetail.inspectTaskMissDTO?.id">
                        <SubEditDropDown dropdownTitle="异常上报">
                          <template v-slot:content>
                            <LazyRender>
                              <ColumnsTable :columns="exceptionReport" :data="itemDetail.inspectTaskMissDTO">
                                <template #value="{ scope }">
                                  <template v-if="scope.prop === 'missingPictureList'">
                                    <PhotoUpload
                                      photoType="view"
                                      :photoData="{ moduleName: 'ifp-digitaltwins' }"
                                      :photoList="scope.data.missingPictureList"
                                    />
                                  </template>
                                </template>
                              </ColumnsTable>
                            </LazyRender>
                          </template>
                        </SubEditDropDown>
                      </div>
                    </template>
                  </SubEditDropDown>
                  <!-- 历史抄表值弹窗 -->
                  <ViewHistory v-model="isHistory" @closeDialog="isHistory = false" />
                </template>
              </EditDropDown>
              <EditDropDown v-if="itemDetail?.eqpContentDTOList?.length > 0" dropdownTitle="设备巡检">
                <template v-slot:content>
                  <TitleDropDown
                    v-for="(eqpItem, eqpIndex) in itemDetail.eqpContentDTOList"
                    :key="eqpItem.eqpId"
                    :index="eqpIndex + 1"
                    :dropdownTitle="`${eqpItem.eqpName}（${eqpItem.eqpId}）`"
                    class="equip-name-dropdown"
                  >
                    <template v-slot:content>
                      <SubEditDropDown
                        v-for="inspectItem in eqpItem.contentDTOList"
                        :key="inspectItem.inspectTaskTemContentId"
                        :dropdownTitle="inspectItem.inspectItemContent"
                        class="equip-row-100"
                      >
                        <template v-slot:content>
                          <LazyRender>
                            <px-table
                              :data="inspectItem.contentItemDTOList"
                              style="margin-bottom: 18px"
                              class="equip-table"
                              size="small"
                              max-height="400"
                              border
                            >
                              <template v-if="inspectItem.inspectItemType === 1">
                                <px-table-column fixed="left" prop="meterReadingItem" label="抄表项" min-width="160" show-overflow-tooltip />
                                <px-table-column prop="unit" label="单位" min-width="140" show-overflow-tooltip />
                                <px-table-column prop="maxValue" label="最大值" min-width="100" show-overflow-tooltip />
                                <px-table-column prop="minValue" label="最小值" min-width="120" show-overflow-tooltip />
                                <px-table-column prop="eqpName" label="设备" min-width="150" show-overflow-tooltip />
                                <px-table-column prop="autoMeterReadingPoint" label="自动抄表点" min-width="150" show-overflow-tooltip />
                                <px-table-column prop="result" label="抄表值（选填）" min-width="150" show-overflow-tooltip />
                                <px-table-column label="操作" min-width="150" show-overflow-tooltip>
                                  <template #default="scope">
                                    <px-button link type="primary" disabled @click="handleHistory(scope.row)">历史抄表值</px-button>
                                  </template>
                                </px-table-column>
                              </template>
                              <template v-else>
                                <px-table-column fixed="left" prop="inspectItem" label="巡检项" min-width="160" show-overflow-tooltip />
                                <px-table-column prop="inspectContent" label="巡检内容" min-width="140" show-overflow-tooltip />
                                <template v-if="data.taskStatus === 2">
                                  <px-table-column prop="inspectContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
                                    <template #default="scope">
                                      <div v-if="scope.row.inspectContentRangeCode === 1">文本</div>
                                      <div v-if="scope.row.inspectContentRangeCode === 2">数字</div>
                                      <div v-if="scope.row.inspectContentRangeCode === 3">判断：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                                      <div v-if="scope.row.inspectContentRangeCode === 4">选择：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                                    </template>
                                  </px-table-column>
                                </template>
                                <template v-else>
                                  <px-table-column prop="result" label="巡检结果" min-width="100" show-overflow-tooltip />
                                  <px-table-column prop="executeByName" label="执行人" min-width="120" show-overflow-tooltip />
                                  <px-table-column prop="execTime" label="执行时间" min-width="150" show-overflow-tooltip />
                                </template>
                              </template>
                            </px-table>
                          </LazyRender>
                        </template>
                      </SubEditDropDown>
                      <div v-if="eqpItem.inspectTaskMissDTO?.id">
                        <SubEditDropDown dropdownTitle="异常上报">
                          <template v-slot:content>
                            <LazyRender>
                              <ColumnsTable :columns="exceptionReport" :data="eqpItem.inspectTaskMissDTO">
                                <template #value="{ scope }">
                                  <template v-if="scope.prop === 'missingPictureList'">
                                    <PhotoUpload
                                      photoType="view"
                                      :photoData="{ moduleName: 'ifp-digitaltwins' }"
                                      :photoList="scope.data.missingPictureList"
                                    />
                                  </template>
                                </template>
                              </ColumnsTable>
                            </LazyRender>
                          </template>
                        </SubEditDropDown>
                      </div>
                    </template>
                  </TitleDropDown>
                </template>
              </EditDropDown>
            </px-scrollbar>
          </div>
        </px-tab-pane>
      </px-tabs>
      <px-empty v-else :image-size="200" description="暂无数据" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.view-flex {
  width: 100%;
  height: calc(100vh - 126px);
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}
.tab-container {
  height: calc(100% - 68px);
}
:deep(.equip-table) {
  width: 100%;

  .px-table__header thead tr th {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #e7eefb !important;
  }

  td.px-table__cell div {
    width: 100%;
  }
}
</style>
